
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>站点展示</title>
	<meta http-equiv="cleartype" content="on">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale =1">
	<meta name="apple-mobile-web-app-title" content="公交">
	<meta name="description" content=" 最精准的实时公交app">
	<meta name="keywords" content="实时公交">
	<meta name="renderer" content=webkit>
	<meta name="force-rendering" content="webkit">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content=" 320">
	<meta name="screen-orientation" content="portrait">
	<meta name="x5-orientation" content="portrait">
	<meta name="format-detection" content=" telephone=no; address=no;email =no;">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<meta name="mobile-web-app-capable" content="yes">

	<meta name="x5-fullscreen" content="true">
	<meta name="browsermode" content="application">
	<meta name="x5-page-mode" content="app">

	<link href="../css/mui.min.css" rel="stylesheet" />
	<link href="../fonts/iconfont.css" rel="stylesheet" />
	<link href="../css/common.css" rel="stylesheet" />
	<link href="../css/bns.css" rel="stylesheet" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_1264016_ldlpa9ch2o.css">
	<link rel="stylesheet" href="../icon/iconfont.css">
	<script src="../icon/iconfont.js"></script>
</head>

<body style="background-color:#000000; overflow: hidden;">
	<header class="mui-bar mui-bar-nav" style="background-color:#fff ;">
		<a class="gz-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="historyBack()"
			style="margin-right: -35px;color: #000000;padding-top: 0;margin-top: 3px; font-size: 36px;opacity: 1;padding-bottom: 0;"></a>
		<h3 id="roter_name" style="text-align: center;line-height: 35px; font-size: 20px;color: #000000;"></h3>
	</header>
	<div class="mui-content" id="show-site">
		<div class="show-site-panel">
			<div class="site-des">
				<ul class="ul1">
					<li id="shang"></li>
					<li id="xia"></li>
				</ul>
				<ul class="ul2">
					<li>
						<div id="shangs"></div>
					</li>
					<li>
						<div id="xias"></div>
					</li>
				</ul>
			</div>
			<div class="site-dess">
				<div class="tops">
					<span class="shi1">首</span>
					<span id="shi1"></span>
					<span class="mo1">末</span>
					<span id="mo1"></span>
					<span class="piao">票价:</span>
					<span id="piao"></span>
				</div>
				<div class="bottoms">
					<span class="yun">运营里程：</span>
					<span id="yun"></span>
				</div>
			</div>
		</div>
		<div class="show-site-panels"> </div>
		<div class="site-btn-panel">
			<div class="mui-btton iconfont iconfancheng" id="back-line">
				<p>返程</p>

			</div>
			<div class="mui-btton iconfont iconshuaxin" id="refresh-btn">
				<p>刷新</p>
			</div>
		</div>
	</div>
</body>

</html>
<script src="../js/api.js"></script>
<script src="../js/zepto.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/boot.js"></script>
<script src="../js/map.js"></script>
<script src="../js/components.js"></script>
<script type="text/javascript">
	var webApp = {
		start_stop: null,
		end_stop: null,
		a: 0,
		dataStore: {
			carStore: null,
			lineStore: null,
			cacheStore: null
		},
		methodInit: {
			linerank: function () {
				var json = wbComMethod.onUrlParams();
				var date = new Date().getTime();
				frDataRequest.ajaxRequest({
					url: webApi.getUrl(webApi.monitor.line_rank),
					// url: 'http://192.168.1.109:8081/xwp_busbase_api_war_exploded/bus/statistics/line_rank',
					param: {
						route_name: json.name,
						route_id: json.routeid,
						start_time: date,
					},
					success: function (jd) {},
					error: function () {},
				});
			},
			//加载线路（type为当前为第几条线路。默认为0）
			onLodeLineInfo: function (type) {
				wbComMethod.loadMask.show();
				var json = wbComMethod.onUrlParams();
				frDataRequest.ajaxRequest({
					url: webApi.getUrl(webApi.monitor.lineInfo),
					param: {
						routername: json.name,
						routeid: json.routeid
					},
					success: function (jd) {
						wbComMethod.loadMask.hide();
						if (jd.success) {
							var dataLines = jd.data;
							webApp.dataStore.lineStore = jd.data;
							webApp.dataStore.carStore = jd.data.vehicles;
							webApp.methodInit.onLoadSite(0);

							//alert(jd);
							;
						} else {
							webApp.methodInit.onCreatLineDom([]);
						}
					},
					error: function () {
						webApp.methodInit.onCreatLineDom([]);
					},
				});
			},
			//加载站点
			onLoadSite: function (type) {
				wbComMethod.loadMask.show();
				var line = webApp.dataStore.lineStore[parseInt(type)];
				var lineInfo = {
					name: line.linename,
					sites: null,
				};
				//console.log(line);
				//console.log(lineInfo.name);
				frDataRequest.ajaxRequest({
					url: webApi.getUrl(webApi.monitor.siteList),
					param: {
						id: line.lineid,
					},
					success: function (jd) {
						wbComMethod.loadMask.hide();
						if (jd.success) {
							var data = jd.data;
							lineInfo.sites = data;
							lineInfo.start_stop = data[0].name;
							lineInfo.end_stop = data[data.length - 1].name;
							if (webApp.a == 0) {
								webApp.start_stop = "往" + lineInfo.start_stop;
								webApp.end_stop = "往" + lineInfo.end_stop;
								webApp.a = 1;
							}

							webApp.methodInit.onCreatLineDom(lineInfo, line);
						}
					},
					error: function () {
						console.log("error");
					},
				});
			},
			//加载在线车辆
			onLoadcar: function (line) {
				// console.log(line);
				wbComMethod.loadMask.show();
				frDataRequest.ajaxRequest({
					url: webApi.getUrl(webApi.monitor.vehicleList),
					param: {
						lineid: line.lineid,
						routeid: line.routeid
						//routername: name,
					},
					success: function (jd) {
						wbComMethod.loadMask.hide();
						if (jd.success) {
							var carStores = jd.data.vehicles;
							var carStore = [];
							for (var i = 0; i <= carStores.length - 1; i++) {
								if (carStores[i].online == 1) {
									carStore.push(carStores[i]);
								}
							}
							webApp.methodInit.onSetActivecar(carStore);
						}
					},
					error: function () {
						console.log("error");
					},
				});
			},
			//路线列表
			onLoderotelist: function (type) {
				wbComMethod.loadMask.show();
				var json = wbComMethod.onUrlParams();
				frDataRequest.ajaxRequest({
					url: webApi.getUrl(webApi.monitor.rotelist),
					param: {
						routername: json.name,
					},
					success: function (jd) {
						wbComMethod.loadMask.hide();
						if (jd.success) {
							var dataLines = jd.data.lines;
							webApp.dataStore.lineStore = jd.data.lines;
							webApp.dataStore.carStore = jd.data.vehicles;
							webApp.methodInit.onLoadSite(0);
						} else {
							webApp.methodInit.onCreatLineDom([]);
						}
					},
					error: function () {
						webApp.methodInit.onCreatLineDom([]);
					},
				});
			},
			//将车辆设置到对应的站点上面去
			onSetActivecar: function (data) {
				if (!data) return;
				var time = [];
				$("#show-site .show-site-panels .site-item").removeClass("active");
				$("#show-site .site-container .site-panel .site-item .site-top .img-panels").html("");
				$("#show-site .site-container .site-panel .site-item .site-top").removeClass("site-tops");

				for (var i = 0; i < data.length; i++) {
					time.push(data[i].out_time);
					var obj = $("#show-site .show-site-panels .site-item#site" + data[i].stationid);
					if (obj.length > 0) {
						if (time[i] == 0) {
							obj.addClass('active');
							$("#show-site .show-site-panels .site-container .site-panel .site-item .site-top #box" +
								data[i]
								.stationid).html(data[i].platno);
							$("#show-site .site-container .site-panel .site-item #site-top" + data[i].stationid)
								.removeClass(
									"site-tops");
							obj.removeClass("a");
						} else if (time[i] != 0) {
							obj.addClass('active a');
							$("#show-site .show-site-panels .site-container .site-panel .site-item .site-top #box" +
								data[i]
								.stationid).html(data[i].platno);
							$("#show-site .site-container .site-panel .site-item #site-top" + data[i].stationid)
								.addClass(
									"site-tops");
							$("#show-site .site-container .site-panel .site-item.active .site-bottom #p" + data[i]
								.stationid).css(
								"color", "#000");
							$("#show-site .show-site-panels .site-item#site" + data[i].stationid).append(
								"<style>#show-site .site-container .site-panel .site-item.a::after{border: none;background-color: #fff;}</style>"
							);
						}
					}
				};
			},
			//根据线路数据站点数据生成界面
			onCreatLineDom: function (res, line) {
				var html = '',
					htmls = '';
				if (JSON.stringify(res) === '[]') {
					html = wbComMethod.showNullInfoMsg('暂无线路信息！', '../img/bns/homepage_img_nocontent.png');
					wbComMethod.loadMask.hide();
					$("#show-site .show-site-panel").html(html);
					$("#show-site .show-site-panels").html('');
				} else {
					var data = res,
						sites = res.sites;
					var time = line;
					var stime = time.starttime;
					var etime = time.endtime;
					var fare = time.fare;
					if (fare == undefined) {
						fare = 0;
					}
					var distance = (time.distance / 1000).toFixed(2);
					if (distance == "NaN") {
						distance = 0;
					}
					$("#roter_name").html(time.routename);
					// $("#shang").html('往' + webApp.end_stop);
					// $("#xia").html('往' + webApp.start_stop);
					$("#shi1").html(stime);
					$("#mo1").html(etime);
					$("#piao").html(fare + '元');
					$("#yun").html(distance + 'km');
					htmls += '<div class="site-container">' +
						'<div class="site-panel">' +
						'<div class="shi">' +
						'始' +
						'</div>'
					for (var i = 0; i < sites.length; i++) {
						htmls += '<div class="site-item" id="site' + sites[i].id + '">' +
							'<div class="site-top" id="site-top' + sites[i].id + '"> ' +
							'<div class="img-panel"></div>' +
							'<div class="img-panels" id="box' + sites[i].id + '"></div>' +
							'</div>' +
							'<div class="site-middle" id="mid' + sites[i].id + '"></div>' +
							'<div class="site-bottom">' +
							'<p id="p' + sites[i].id + '">' + sites[i].name + '</p>' +
							'</div>' +
							'</div>';
					}
					htmls += '<div class="zhong">' +
						'终' +
						'</div>'
					htmls += '</div></div>';
					$("#show-site .show-site-panels").html(htmls);
					// debugger

					var m = sites.pop();
					$("#show-site .show-site-panels .site-item #mid" + m.id).css("border", "none");
					$("#show-site .show-site-panels .site-item #mid" + m.id).addClass("b");
					$("#show-site .show-site-panels .site-item #mid" + m.id).append(
						"<style>#show-site .site-container .site-panel .site-item .b::before{left: -6px;}</style>"
					)

					webApp.dataStore.cacheStore = {
						lineid: line.lineid,
						routeid: line.routeid
					};

					webApp.methodInit.onLoadcar(webApp.dataStore.cacheStore);
					var json = wbComMethod.onUrlParams();
					wbComMethod.loadMask.hide();
					var storage = {
						name: json.name,
						id: json.routeid
					}

					if (localStorage.getItem('line')) {
						var exitSite = eval('(' + localStorage.getItem('line') + ')');
						for (var j = 0; j < exitSite.length; j++) {
							if (json.name == exitSite[j].name) {
								return;
							}
						}
					}
					wbComMethod.setLocalStorage(storage);
				}
			},
			headHtml: function () {
				var htmld = "";
				if (webApp.end_stop == null || webApp.end_stop == "往null" || webApp.end_stop == "加载中...") {
					webApp.end_stop = "加载中...";
					webApp.start_stop = "加载中...";
					setTimeout(function () {
						webApp.methodInit.headHtml();
					}, 1000);
				}
				if (webApp.end_stop == webApp.start_stop) {
					htmld += '<ul class="ul1"><li id="shang" style="width:100%">' + webApp.end_stop +
						'</li></ul>';
					htmld += '<ul class="ul2"><li style="width:100%"><div id="shangs" ></div></li></ul>';
				} else {
					htmld += '<ul class="ul1"><li id="shang">' + webApp.end_stop + '</li><li id = "xia">' +
						webApp.start_stop + '</li></ul>';
					htmld +=
						'<ul class="ul2"><li><div id="shangs"></div></li><li><div id = "xias"></div></li></ul>';
				}
				$("#show-site .site-des").html(htmld);

				webApp.eventInit();
			}
		},
		eventInit: function () {
			//返程按钮
			$("#show-site #shang").click(function () {
				var type = 0;
				// if ($(this).attr('data-type') == 0) {
				// 	type = 1;
				// 	$(this).attr('data-type', 1);
				// } else $(this).attr('data-type', 0);
				$("#show-site #shangs").css("background", "#e77d35");
				$("#show-site #xias").css("background", "none");
				webApp.methodInit.onLoadSite(type);
			});
			$("#show-site #xia").click(function () {
				var type = 1;
				// if ($(this).attr('data-type') == 0) {
				// 	type = 1;
				// 	$(this).attr('data-type', 1);
				// } else $(this).attr('data-type', 0);
				$("#show-site #xias").css("background", "#e77d35");
				$("#show-site #shangs").css("background", "none");
				webApp.methodInit.onLoadSite(type);
			});
			//刷新按钮
			$("#show-site #refresh-btn").click(function () {
				//var linename=$("#show-site .site-des .linename").text(); 
				webApp.methodInit.onLoadcar(webApp.dataStore.cacheStore);
			});
		},


		pageInit: function () {
			mapTool.onImport(function (ctx) {
				// ctx.onInitLineSerach({
				// 	city: '永州'
				// });
				webApp.methodInit.linerank();
				webApp.methodInit.onLodeLineInfo(0);
			});
			setTimeout(function () {
				webApp.methodInit.headHtml();
			}, 3000);

		},

	};


	setInterval(function () {
		webApp.methodInit.onLoadcar(webApp.dataStore.cacheStore);
	}, 10000);


	window.onload = function () {
		webApp.pageInit();
		wbComMethod.loadMask.show();
	};
</script>